<template>
	<view>
        <view class="icons">
            <view class="icons-item" v-for="icon in icons" :key="icon">
                <jk-icon :type="icon" size="30" color="#333"></jk-icon>
                <view class="icons-item-name">{{icon}}</view>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icons: [
				    "ios-add",
				    "ios-add-circle",
				    "ios-airplane",
				    "ios-alert",
				    "ios-aperture",
				    "ios-alarm",
				    "ios-analytics",
				    "ios-albums",
				    "ios-add-circle-outline",
				    "ios-archive",
				    "ios-american-football",
				    "ios-apps",
				    "ios-arrow-dropdown",
				    "ios-arrow-down",
				    "ios-arrow-back",
				    "ios-appstore",
				    "ios-arrow-dropleft-circle",
				    "ios-arrow-dropleft",
				    "ios-arrow-dropdown-circle",
				    "ios-arrow-dropup",
				    "ios-arrow-dropright-circle",
				    "ios-arrow-dropright",
				    "ios-arrow-round-back",
				    "ios-arrow-forward",
				    "ios-arrow-round-down",
				    "ios-arrow-round-forward",
				    "ios-arrow-round-up",
				    "ios-attach",
				    "ios-at",
				    "ios-arrow-up",
				    "ios-backspace",
				    "ios-baseball",
				    "ios-basketball",
				    "ios-basket",
				    "ios-barcode",
				    "ios-battery-dead",
				    "ios-beaker",
				    "ios-battery-charging",
				    "ios-battery-full",
				    "ios-bed",
				    "ios-bicycle",
				    "ios-beer",
				    "ios-bluetooth",
				    "ios-body",
				    "ios-book",
				    "ios-bookmark",
				    "ios-bookmarks",
				    "ios-bonfire",
				    "ios-briefcase",
				    "ios-boat",
				    "ios-browsers",
				    "ios-build",
				    "ios-brush",
				    "ios-bug",
				    "ios-bus",
				    "ios-bulb",
				    "ios-bowtie",
				    "ios-calculator",
				    "ios-calendar",
				    "ios-call",
				    "ios-camera",
				    "ios-business",
				    "ios-cart",
				    "ios-card",
				    "ios-chatboxes",
				    "ios-cash",
				    "ios-car",
				    "ios-chatbubbles",
				    "ios-checkbox",
				    "ios-checkmark-circle",
				    "ios-checkbox-outline",
				    "ios-checkmark-circle-outline",
				    "ios-checkmark",
				    "ios-close",
				    "ios-cloud",
				    "ios-close-circle",
				    "ios-clock",
				    "ios-clipboard",
				    "ios-cloud-circle",
				    "ios-close-circle-outline",
				    "ios-cloud-download",
				    "ios-cloud-done",
				    "ios-cloudy",
				    "ios-cloud-outline",
				    "ios-cloud-upload",
				    "ios-cloudy-night",
				    "ios-code",
				    "ios-cafe",
				    "ios-code-working",
				    "ios-color-fill",
				    "ios-compass",
				    "ios-color-wand",
				    "ios-color-filter",
				    "ios-color-palette",
				    "ios-arrow-dropup-circle",
				    "ios-code-download",
				    "ios-contact",
				    "ios-cellular",
				    "ios-contrast",
				    "ios-contacts",
				    "ios-copy",
				    "ios-crop",
				    "ios-contract",
				    "ios-desktop",
				    "ios-cube",
				    "ios-create",
				    "ios-done-all",
				    "ios-disc",
				    "ios-document",
				    "ios-egg",
				    "ios-exit",
				    "ios-expand",
				    "ios-easel",
				    "ios-fastforward",
				    "ios-female",
				    "ios-eye-off",
				    "ios-flag",
				    "ios-flame",
				    "ios-finger-print",
				    "ios-flash",
				    "ios-filing",
				    "ios-film",
				    "ios-fitness",
				    "ios-flash-off",
				    "ios-cog",
				    "ios-flashlight",
				    "ios-folder",
				    "ios-download",
				    "ios-folder-open",
				    "ios-flask",
				    "ios-funnel",
				    "ios-eye",
				    "ios-gift",
				    "ios-football",
				    "ios-git-commit",
				    "ios-cut",
				    "ios-flower",
				    "ios-git-merge",
				    "ios-git-network",
				    "ios-git-compare",
				    "ios-git-branch",
				    "ios-git-pull-request",
				    "ios-globe",
				    "ios-glasses",
				    "ios-construct",
				    "ios-hand",
				    "ios-grid",
				    "ios-hammer",
				    "ios-heart",
				    "ios-happy",
				    "ios-headset",
				    "ios-heart-dislike",
				    "ios-heart-empty",
				    "ios-heart-half",
				    "ios-help",
				    "ios-help-circle",
				    "ios-help-buoy",
				    "ios-help-circle-outline",
				    "ios-home",
				    "ios-hourglass",
				    "ios-images",
				    "ios-information",
				    "ios-information-circle",
				    "ios-infinite",
				    "ios-image",
				    "ios-information-circle-outline",
				    "ios-ice-cream",
				    "ios-laptop",
				    "ios-keypad",
				    "ios-leaf",
				    "ios-jet",
				    "ios-list",
				    "ios-lock",
				    "ios-list-box",
				    "ios-key",
				    "ios-locate",
				    "ios-magnet",
				    "ios-mail",
				    "ios-log-out",
				    "ios-mail-unread",
				    "ios-mail-open",
				    "ios-log-in",
				    "ios-male",
				    "ios-map",
				    "ios-man",
				    "ios-medkit",
				    "ios-medical",
				    "ios-medal",
				    "ios-mic",
				    "ios-menu",
				    "ios-megaphone",
				    "ios-moon",
				    "ios-mic-off",
				    "ios-more",
				    "ios-musical-note",
				    "ios-move",
				    "ios-musical-notes",
				    "ios-notifications-off",
				    "ios-nuclear",
				    "ios-options",
				    "ios-open",
				    "ios-nutrition",
				    "ios-notifications-outline",
				    "ios-notifications",
				    "ios-paper-plane",
				    "ios-paper",
				    "ios-pause",
				    "ios-navigate",
				    "ios-paw",
				    "ios-partly-sunny",
				    "ios-outlet",
				    "ios-person",
				    "ios-people",
				    "ios-phone-portrait",
				    "ios-pie",
				    "ios-pin",
				    "ios-phone-landscape",
				    "ios-play",
				    "ios-pizza",
				    "ios-planet",
				    "ios-play-circle",
				    "ios-podium",
				    "ios-power",
				    "ios-link",
				    "ios-pricetag",
				    "ios-print",
				    "ios-pricetags",
				    "ios-pulse",
				    "ios-photos",
				    "ios-microphone",
				    "ios-journal",
				    "ios-person-add",
				    "ios-pint",
				    "ios-quote",
				    "ios-qr-scanner",
				    "ios-radio-button-off",
				    "ios-radio-button-on",
				    "ios-rainy",
				    "ios-recording",
				    "ios-redo",
				    "ios-radio",
				    "ios-remove",
				    "ios-refresh-circle",
				    "ios-refresh",
				    "ios-remove-circle",
				    "ios-reorder",
				    "ios-remove-circle-outline",
				    "ios-repeat",
				    "ios-restaurant",
				    "ios-return-left",
				    "ios-return-right",
				    "ios-reverse-camera",
				    "ios-rewind",
				    "ios-rocket",
				    "ios-rose",
				    "ios-sad",
				    "ios-save",
				    "ios-ribbon",
				    "ios-send",
				    "ios-search",
				    "ios-school",
				    "ios-settings",
				    "ios-share-alt",
				    "ios-skip-backward",
				    "ios-shuffle",
				    "ios-speedometer",
				    "ios-shirt",
				    "ios-resize",
				    "ios-skip-forward",
				    "ios-square",
				    "ios-square-outline",
				    "ios-star",
				    "ios-snow",
				    "ios-star-outline",
				    "ios-share",
				    "ios-star-half",
				    "ios-stats",
				    "ios-swap",
				    "ios-stopwatch",
				    "ios-subway",
				    "ios-sunny",
				    "ios-switch",
				    "ios-tablet-landscape",
				    "ios-tablet-portrait",
				    "ios-tennisball",
				    "ios-text",
				    "ios-thumbs-down",
				    "ios-sync",
				    "ios-thumbs-up",
				    "ios-time",
				    "ios-thermometer",
				    "ios-thunderstorm",
				    "ios-timer",
				    "ios-train",
				    "ios-trending-down",
				    "ios-transgender",
				    "ios-trash",
				    "ios-tv",
				    "ios-trending-up",
				    "ios-trophy",
				    "ios-unlock",
				    "ios-videocam",
				    "ios-umbrella",
				    "ios-volume-low",
				    "ios-volume-high",
				    "ios-volume-mute",
				    "ios-volume-off",
				    "ios-wallet",
				    "ios-walk",
				    "ios-warning",
				    "ios-watch",
				    "ios-wine",
				    "ios-wifi",
				    "ios-water",
				    "ios-woman",
				    "ios-today",
				    "ios-undo",
				    "logo-angular",
				    "logo-android",
				    "logo-apple",
				    "logo-bitbucket",
				    "logo-buffer",
				    "logo-designernews",
				    "logo-css",
				    "logo-bitcoin",
				    "logo-facebook",
				    "logo-closed-captioning",
				    "logo-dropbox",
				    "logo-dribbble",
				    "logo-linkedin",
				    "logo-html",
				    "logo-github",
				    "logo-game-controller-a",
				    "logo-game-controller-b",
				    "logo-codepen",
				    "logo-chrome",
				    "logo-ionic",
				    "logo-flickr",
				    "logo-hackernews",
				    "logo-euro",
				    "logo-google",
				    "logo-pinterest",
				    "logo-octocat",
				    "logo-foursquare",
				    "logo-googleplus",
				    "logo-polymer",
				    "logo-ionitron",
				    "logo-twitter",
				    "logo-nodejs",
				    "logo-instagram",
				    "logo-freebsd-devil",
				    "logo-python",
				    "logo-rss",
				    "logo-vk",
				    "logo-markdown",
				    "logo-yahoo",
				    "logo-skype",
				    "logo-reddit",
				    "logo-slack",
				    "logo-no-smoking",
				    "md-alert",
				    "logo-wordpress",
				    "md-archive",
				    "logo-xbox",
				    "logo-javascript",
				    "md-add",
				    "logo-model-s",
				    "md-arrow-dropdown",
				    "logo-tumblr",
				    "logo-tux",
				    "md-airplane",
				    "md-aperture",
				    "md-arrow-dropleft-circle",
				    "md-arrow-round-back",
				    "logo-npm",
				    "md-arrow-dropup",
				    "md-american-football",
				    "logo-vimeo",
				    "logo-usd",
				    "logo-snapchat",
				    "md-attach",
				    "md-baseball",
				    "logo-playstation",
				    "md-arrow-back",
				    "logo-yen",
				    "md-beaker",
				    "logo-whatsapp",
				    "md-arrow-dropright-circle",
				    "md-analytics",
				    "md-bluetooth",
				    "logo-sass",
				    "md-alarm",
				    "logo-windows",
				    "md-bookmark",
				    "logo-steam",
				    "logo-twitch",
				    "md-arrow-round-up",
				    "md-battery-charging",
				    "md-arrow-round-forward",
				    "md-arrow-forward",
				    "md-bookmarks",
				    "md-add-circle",
				    "md-apps",
				    "md-battery-full",
				    "md-book",
				    "md-basketball",
				    "md-arrow-dropright",
				    "md-backspace",
				    "md-arrow-up",
				    "md-arrow-dropup-circle",
				    "md-build",
				    "logo-xing",
				    "md-browsers",
				    "md-arrow-dropdown-circle",
				    "md-bowtie",
				    "md-add-circle-outline",
				    "logo-youtube",
				    "md-body",
				    "md-beer",
				    "md-battery-dead",
				    "md-basket",
				    "md-business",
				    "md-bulb",
				    "md-card",
				    "md-call",
				    "md-cart",
				    "md-cash",
				    "md-bed",
				    "md-arrow-round-down",
				    "md-checkmark-circle",
				    "md-calendar",
				    "md-chatbubbles",
				    "md-checkbox",
				    "md-checkmark-circle-outline",
				    "md-bonfire",
				    "md-albums",
				    "md-clipboard",
				    "md-clock",
				    "md-car",
				    "md-close",
				    "md-arrow-down",
				    "md-cloud-done",
				    "md-checkmark",
				    "md-bug",
				    "md-cellular",
				    "md-bicycle",
				    "md-briefcase",
				    "md-cloud",
				    "md-code",
				    "md-brush",
				    "md-cloud-circle",
				    "md-cloud-download",
				    "md-bus",
				    "md-cloudy",
				    "md-calculator",
				    "md-cloudy-night",
				    "md-color-fill",
				    "md-code-download",
				    "md-close-circle-outline",
				    "md-cog",
				    "md-cloud-upload",
				    "md-contact",
				    "md-color-filter",
				    "md-construct",
				    "md-color-palette",
				    "md-contract",
				    "md-create",
				    "md-copy",
				    "md-crop",
				    "md-checkbox-outline",
				    "md-cut",
				    "md-contacts",
				    "md-disc",
				    "md-camera",
				    "md-document",
				    "md-download",
				    "md-appstore",
				    "md-contrast",
				    "md-done-all",
				    "md-code-working",
				    "md-fastforward",
				    "md-chatboxes",
				    "md-desktop",
				    "md-arrow-dropleft",
				    "md-egg",
				    "md-cube",
				    "md-eye-off",
				    "md-easel",
				    "md-flag",
				    "md-finger-print",
				    "md-color-wand",
				    "md-flash",
				    "md-expand",
				    "md-folder",
				    "md-exit",
				    "md-eye",
				    "md-film",
				    "md-at",
				    "md-flask",
				    "md-filing",
				    "md-female",
				    "md-flash-off",
				    "md-football",
				    "md-barcode",
				    "md-gift",
				    "md-git-commit",
				    "md-flame",
				    "md-git-compare",
				    "md-git-network",
				    "md-close-circle",
				    "md-git-merge",
				    "md-heart",
				    "md-git-pull-request",
				    "md-flower",
				    "md-grid",
				    "md-heart-half",
				    "md-cloud-outline",
				    "md-compass",
				    "md-hammer",
				    "md-happy",
				    "md-boat",
				    "md-cafe",
				    "md-heart-dislike",
				    "md-help-circle",
				    "md-ice-cream",
				    "md-heart-empty",
				    "md-information",
				    "md-help",
				    "md-git-branch",
				    "md-information-circle",
				    "md-infinite",
				    "md-hourglass",
				    "md-hand",
				    "md-help-circle-outline",
				    "md-fitness",
				    "md-information-circle-outline",
				    "md-help-buoy",
				    "md-laptop",
				    "md-key",
				    "md-folder-open",
				    "md-images",
				    "md-home",
				    "md-flashlight",
				    "md-jet",
				    "md-glasses",
				    "md-journal",
				    "md-leaf",
				    "md-funnel",
				    "md-list-box",
				    "md-headset",
				    "md-image",
				    "md-locate",
				    "md-lock",
				    "md-log-out",
				    "md-list",
				    "md-mail",
				    "md-magnet",
				    "md-mail-unread",
				    "md-male",
				    "md-keypad",
				    "md-mail-open",
				    "md-man",
				    "md-medal",
				    "md-globe",
				    "md-map",
				    "md-link",
				    "md-medical",
				    "md-medkit",
				    "md-menu",
				    "md-megaphone",
				    "md-more",
				    "md-musical-note",
				    "md-microphone",
				    "md-move",
				    "md-moon",
				    "md-musical-notes",
				    "md-mic-off",
				    "md-notifications",
				    "md-mic",
				    "md-navigate",
				    "md-nutrition",
				    "md-notifications-off",
				    "md-nuclear",
				    "md-paper-plane",
				    "md-notifications-outline",
				    "md-paper",
				    "md-partly-sunny",
				    "md-log-in",
				    "md-paw",
				    "md-person-add",
				    "md-pause",
				    "md-open",
				    "md-outlet",
				    "md-options",
				    "md-pin",
				    "md-people",
				    "md-photos",
				    "md-phone-portrait",
				    "md-pint",
				    "md-person",
				    "md-pie",
				    "md-play",
				    "md-pizza",
				    "md-power",
				    "md-play-circle",
				    "md-pricetag",
				    "md-podium",
				    "md-planet",
				    "md-print",
				    "md-pricetags",
				    "md-radio",
				    "md-radio-button-off",
				    "md-pulse",
				    "md-qr-scanner",
				    "md-quote",
				    "md-rainy",
				    "md-radio-button-on",
				    "md-phone-landscape",
				    "md-redo",
				    "md-refresh-circle",
				    "md-recording",
				    "md-remove",
				    "md-refresh",
				    "md-remove-circle",
				    "md-reorder",
				    "md-repeat",
				    "md-return-right",
				    "md-return-left",
				    "md-restaurant",
				    "md-remove-circle-outline",
				    "md-ribbon",
				    "md-reverse-camera",
				    "md-rewind",
				    "md-resize",
				    "md-rose",
				    "md-rocket",
				    "md-school",
				    "md-sad",
				    "md-save",
				    "md-search",
				    "md-send",
				    "md-share",
				    "md-share-alt",
				    "md-shuffle",
				    "md-skip-backward",
				    "md-settings",
				    "md-snow",
				    "md-speedometer",
				    "md-skip-forward",
				    "md-square",
				    "md-shirt",
				    "md-square-outline",
				    "md-star",
				    "md-star-half",
				    "md-star-outline",
				    "md-subway",
				    "md-sunny",
				    "md-sync",
				    "md-tablet-portrait",
				    "md-swap",
				    "md-switch",
				    "md-thumbs-down",
				    "md-tennisball",
				    "md-thermometer",
				    "md-text",
				    "md-thumbs-up",
				    "md-time",
				    "md-thunderstorm",
				    "md-timer",
				    "md-today",
				    "md-transgender",
				    "md-trending-up",
				    "md-trending-down",
				    "md-trash",
				    "md-stopwatch",
				    "md-train",
				    "md-tv",
				    "md-umbrella",
				    "md-stats",
				    "md-unlock",
				    "md-videocam",
				    "md-volume-low",
				    "md-volume-off",
				    "md-walk",
				    "md-warning",
				    "md-trophy",
				    "md-volume-mute",
				    "md-undo",
				    "md-watch",
				    "md-wallet",
				    "md-tablet-landscape",
				    "md-volume-high",
				    "md-wifi",
				    "md-water",
				    "md-woman",
				    "md-wine"
				]
			};
		},
	}
</script>

<style lang="scss">
.icons{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &-item{
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        flex: 0 0 32%;
        flex-direction: column;
        padding: 20upx 0;
        margin-bottom: 20px;
        &-name{
            font-size: 24upx;
            width: 100%;
            color: #666;
            flex: 0 0 40px;
            display: flex;
            justify-content: center;
            text-align: center;
            align-items: center;
        }
    }
}
</style>
